<template>
	<!-- 头部居顶 -->
	<view class="fixed-layout">
		<!-- 排序标签 -->
		<view class="list-sort-bar posts-sort">
			<button class="sort-button selected">雪茄详情</button>
			<button class="sort-button">用户评论</button>
			<button class="sort-button">品鉴帖子</button>
		</view>
	</view>
	<view class="content">
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block half"></view>
		<!-- 顶部滚动幻灯 -->
		<view class="top-slider">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item">
						<view class="cigar-photo">
							<image src="../../static/temp-cigar-photo-3.png" mode="widthFix"></image>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="cigar-photo">
							<image src="../../static/temp-cigar-photo-2.png" mode="widthFix"></image>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="cigar-photo">
							<image src="../../static/temp-cigar-photo-1.png" mode="widthFix"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="wiper-item-info">
				<view class="item-number"><text class="current-number">1</text>/100</view>
			</view>
		</view>
		<!-- 雪茄详情内容 -->
		<view class="cigar-detail">
			<!-- 头部卡 -->
			<view class="cigar-head-card">
				<view class="cigar-info-head">
					<view class="cigar-logo">
						<image src="../../static/c_cigar-logo/cuba/bolivar.webp" mode="widthFix"></image>
						<!-- <view class="corner-sign year"></view> -->
						<view class="corner-sign area"></view>
					</view>
					<view class="cigar-info">
						<view class="en-name">Cohiba Piramides Extra Cohiba Piramides Extra</view>
						<view class="cn-name">2021年 桑丘西班牙地区限量-特级金字塔</view>
					</view>

				</view>
				<view class="date-list">
					<view class="list-item">
						<text class="score-number">120</text>长度
					</view>
					<view class="list-item">
						<text class="score-number">120</text>环径
					</view>
					<view class="list-item">
						<text class="score-number">120</text>发布年份
					</view>
				</view>
			</view>
			<!-- 详情列表 -->
			<view class="detail-content-list">
				<view class="list-item">
					<view class="item-name">综合评分：</view>
					<view class="item-info">
						<!-- 打分组件 -->
						<view class="five-star big-five-star">
							<uni-rate size="60" :touchable="true" :value="3.5" allow-half show-value/> 3.5
						</view>
					</view>
				</view>
				<view class="list-item">
					<view class="item-name">浓郁度：</view>
					<view class="item-info">
						<!-- 味道组件 -->
						<view class="smell-control">
							<slider value="50" @change="sliderChange" disabled="true"/>
						</view>
					</view>
				</view>
				<view class="list-item">
					<view class="item-name">产地：</view>
					<view class="item-info">古巴</view>
				</view>
				<view class="list-item">
					<view class="item-name">尺寸类型：</view>
					<view class="item-info">特级罗布图 (Robusto Extra)</view>
				</view>
				<view class="list-item">
					<view class="item-name">环标：</view>
					<view class="item-info">
						<view class="cigar-ring-photo hight-fix-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="list-item">
					<view class="item-name">味道：</view>
					<view class="item-info">
						<!-- 味道标签 -->
						<view class="smell-list">
							<text class="smell-tag">威士忌</text>
							<text class="smell-tag">奶油味</text>
							<text class="smell-tag">花生</text>
							<text class="smell-tag">威士忌</text>
							<text class="smell-tag">奶油味</text>
							<text class="smell-tag">花生</text>
							<text @click="testReq" class="link-text">去补充味道 &gt;&gt;</text>
						</view>
					</view>
				</view>
				<view class="list-item">
					<view class="item-name">雪茄介绍：</view>
					<view class="item-info">
						系统定期选择此雪茄下方精彩评论，展示在雪茄介绍中，期待你的评价！
					</view>
				</view>
			</view>
		</view>

		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- 底栏 -->
		<view class="footBar foot-common-content">
			<view class="commentBar">
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-comment"></icon>
					<text>1.2W</text>
				</view>
				<input class="footBar-input" focus placeholder="友善的发言更受欢迎～" />
				<view class="commentBar-btn btn-selected">
					<icon type="" class="fontIcon icon-rate"></icon>
					<text>5</text>
				</view>
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-collect"></icon>
					<text>收藏</text>
				</view>
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-share"></icon>
					<text>分享</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
export default {
	data() {
		return {
			background: ['color1', 'color2', 'color3'],
			indicatorDots: false,
			autoplay: true,
			interval: 2000,
			duration: 500
		}
	},
	methods: {
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay
		},
		intervalChange(e) {
			this.interval = e.target.value
		},
		durationChange(e) {
			this.duration = e.target.value
		}
	}
}
</script>
